<template>
    <view style="background:#f3f4f6; padding-bottom: 130rpx">
        <!-- 启动加载页面 -->
        <view class="splash-screen" v-if="showSplash">
            <view class="splash-content">
                <!-- 中间的图片 -->
                <image 
                    class="splash-image" 
                    src="http://xaiohua.oss-cn-beijing.aliyuncs.com/medias/trees/treeId/images/fc1d61d4-16ad-4489-97e0-31e3fd16fff9.jpg?Expires=4911628274&OSSAccessKeyId=LTAI5t93GNuNHEtLjPm4NWTG&Signature=DIEiLHKgHSs4F0OUWE2fDZRwOpk%3D"
                    mode="aspectFit"
                ></image>
                
                <!-- 右上角倒计时和跳过按钮 -->
                <view class="splash-controls">
                    <view class="countdown-container">
                        <text class="countdown-text">{{ countdown }}s</text>
                    </view>
                    <view class="skip-button" @click="skipSplash">
                        <text class="skip-text">跳过</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 状态栏的占位 -->
        <view class="headers">
        </view>
        <view class="tab-class">
            <view style="display: flex;align-items: center;">
                <span style="margin-left: 30rpx;font-size: 30rpx;">首页</span>
                <view class="u-nav-slot" @click="select_community">
                    <u-icon name="search" size="19" color="#333"></u-icon>
                    <!--					<span style="margin-left: 10rpx;font-size: 14px;">{{ community_name }}</span>-->
                    <span style="margin-left: 10rpx;font-size: 14px;">搜索</span>
                </view>
            </view>
            <view style=" width: 100%;display: flex;justify-content: center;align-items: center;">
                <u-tabs :activeStyle="{
								color: '#000',
								fontWeight: '800'
							}" lineWidth="30" lineColor="#25772f" :list="tab_list" @click="tab_click"
                        :current="information_form.searchType"></u-tabs>
            </view>
        </view>
        <view>

            <view class="content">
                <!-- 热门列表锚点 -->
                <view id="hot-list-anchor"></view>

                <!--					<view-->
                <!--						style="background:#ffffff;padding-bottom:25rpx;margin:0 15rpx;border-radius:15rpx;box-sizing: border-box;margin-top: 10rpx;">-->
                <!--						<u-grid :border="false" col="4">-->
                <!--							<u-grid-item v-for="(listItem,listIndex) in modular_list" :key="listIndex" @click="to_page_click(listItem)" :customStyle="{marginTop:'15rpx'}">-->
                <!--								<u-badge type="error" :value="listItem.badge" numberType="overflow" :offset="[0,-5]" :absolute="true" v-if="listItem.badge"></u-badge>-->
                <!--								<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseImgUrl + listItem.ico_image"-->
                <!--									:size="26" color=""></u-icon>-->
                <!--								<text class="grid-text" style="font-size: 14px;margin-top: 10rpx;">{{listItem.title}}</text>-->
                <!--							</u-grid-item>-->
                <!--						</u-grid>-->
                <!--					</view>-->

                <view v-if="information_form.searchType != 2">
                    <view
                        style="margin:8px;border-radius:8px;min-height:300px;display:flex;align-items:center;justify-content:center;"
                        v-if="page_loding == 'nomore' && $u.test.isEmpty(information_list)">
                        <u-empty mode="news" icon="/static/empty_list.png" text="暂时没有内容"
                                 style="margin-bottom: 25rpx;"></u-empty>
                    </view>

                    <informationList2 ref="information_list" :user_info="userInfo"
                                      @click_item="to_information"></informationList2>
                    <u-loadmore :marginTop="30" :status="page_loding" loading-text="加载中..." loadingIcon="spinner"
                                v-if="!(page_loding == 'nomore' && $u.test.isEmpty(information_list))"/>
                </view>
                    <view v-if="information_form.searchType == 2">
                        <view class="page-main">
                            <view class="container">
                                <!-- 地图组件 -->
                                <map
                                    id="myMap"
                                    :longitude="longitude"
                                    :latitude="latitude"
                                    :scale="scale"
                                    :markers="markers"
                                    :polyline="polyline"
                                    :controls="controls"
                                    style="width: 100%; height: 80vh;"
                                    @markertap="markerTap"
                                    @controltap="controlTap"
                                    @regionchange="regionchange"
                                ></map>
                                <view class="control-group">
                                    <view class="control-btn" style="border-radius: 10rpx 10rpx 0 0;" @click="zoomIn">+
                                    </view>
                                    <view class="control-btn" style="border-radius:  0 0 10rpx 10rpx" @click="zoomOut">-
                                    </view>
                                </view>
                            </view>
                          <!-- 操作按钮 -->
                          <view class="button-group">
                            <view style="padding: 15rpx 30rpx;display: flex">
                              <u-icon  @click="goto_map()" name="map" color="#2979ff" size="28"></u-icon>
                              <u-search actionText="搜索" :animation="false" @custom="get_map(true)"
                                        @search="get_map(true)" v-model="information_form.keyword">
                                <template #right>
                                  <view class="u-search__right" @click="get_map(true)">
                                    <u-icon name="search" size="20" color="#909399"></u-icon>
                                  </view>
                                </template>
                              </u-search>
                            </view>

                          </view>
                        </view>
                    </view>
            </view>
        </view>
        
        <!-- 自然之声图标（固定在左侧） -->
        <view class="nature-sound-icon" @click="gotoNatureSound">
            <view class="icon-container">
                <u-icon name="bell" size="24" color="#25772f"></u-icon>
            </view>
            <text class="icon-text">自然之声</text>
        </view>
        
        <authuserInfo ref="auth_userInfo"></authuserInfo>
        <authPhone ref="auth_phone"></authPhone>
        <!-- 引入自定义tabBar -->
        <custom-tabbar ref="customTabbar" :currentIndex="0" @tabChange="onTabChange"></custom-tabbar>
    </view>
</template>

<script>
// 引入组件

import authuserInfo from "@/components/auth-userinfo/auth-userinfo.vue"
import authPhone from "@/components/auth-phone/auth-phone.vue"

import informationList2 from "@/components/information-list/information-list2.vue"
import CustomTabbar from '@/components/tabbar/tabbar.vue'

export default {
    // 注册组件
    components: {

        authuserInfo,
        authPhone,

        informationList2,
        CustomTabbar
    },
    data() {
        return {
            // 启动页面相关
            showSplash: true,  // 显示启动页面
            countdown: 3,      // 倒计时秒数
            countdownTimer: null, // 倒计时定时器
            
            //     地图
            // 地图中心点坐标
			seach_type:0,
            longitude: '',
            latitude: '',
            province: '',
            // 缩放级别
            scale: 8,
            // 标记点数组
            markers: [],


            // 地图结束
          dictValue: 5,
            is_loading: true,
            error_num: 1,

            page_loding: 'loading',
            is_initialized: false, // 添加初始化标志



            information_list: [],
            userInfo: uni.getStorageSync('userInfo'),
            information_form: {
                page: 0,
                searchType: 0,  // 默认为热门列表
                lat: '',
                lon: '',
                distance: '5',
                size: '5',
                keyword: '',
            },

            tab_list: [{
                name: '热门',
                value: 1
            }, {
                name: '当前位置',
                value: 2
            }, {
                name: '地图',
                value: 3
            }]
        }
    },

    onReady() {
        // 启动倒计时
        this.startCountdown()
    },
    onShow() {
        // 每次显示首页时都默认激活热门tab
        this.information_form.searchType = 0;
        
        // 检查是否是从tabBar切换过来的，并且当前是热门tab
        const globalData = getApp().globalData;
        if (globalData && globalData.switchToHotTab) {
            // 清除标记
            globalData.switchToHotTab = false;
            // 延迟执行滚动到顶部，确保页面渲染完成
            this.$nextTick(() => {
                setTimeout(() => {
                    this.scrollToHotList();
                }, 100);
            });
        }
        
        // 检查是否是从tabBar点击"热门"进入的页面
        const app = getApp();
        if (app.globalData && app.globalData.clickedHotTab) {
            app.globalData.clickedHotTab = false;
            // 延迟执行滚动到顶部，确保页面渲染完成
            this.$nextTick(() => {
                setTimeout(() => {
                    this.scrollToHotList();
                }, 100);
            });
        }
        
        // 每次显示页面时都调用init方法，确保数据能正常加载
        this.init();
    },
    onPullDownRefresh() {
        this.init()
    },
    async onReachBottom() {
        if (this.information_form.searchType != 2) {
            await this.get_information()
        }
    },
    
    onUnload() {
        // 页面销毁时清理定时器
        if (this.countdownTimer) {
            clearInterval(this.countdownTimer);
            this.countdownTimer = null;
        }
    },
    methods: {
        // 处理tab切换
        onTabChange(index) {
            // 保存当前tab索引到全局数据
            const app = getApp();
            if (app) {
                app.globalData = app.globalData || {};
                app.globalData.currentTabIndex = index;
            }
            
            // 如果点击的不是首页tab（索引0），则跳转到对应页面
            if (index !== 0) {
                // 执行页面跳转
                uni.switchTab({
                    url: this.$refs.customTabbar.tabList[index].pagePath,
                    fail: (err) => {
                        console.error('tab跳转失败:', err)
                    }
                })
            }
            // 如果点击的是首页tab（索引0），则保持在首页，不需要做任何事情
        },
        
        // 重新加载当前tab数据
        async reloadCurrentTabData() {
            // 设置加载状态
            this.page_loding = 'loading';
            
            // 清空当前列表
            this.information_list = [];
            this.$refs.information_list.foreFlowView(); // 清空瀑布流
            this.information_form.page = 0;
            
            // 根据当前tab加载对应数据
            if (this.information_form.searchType != 2) {
                await this.get_information();
            } else {
                this.information_form.keyword = '';
                this.information_form.size = this.dictValue;
                await this.get_map(true);
            }
        },
        
        // 滚动到热门列表
        scrollToHotList() {
            // 使用uni.createSelectorQuery获取锚点位置并滚动
            const query = uni.createSelectorQuery();
            query.select('#hot-list-anchor').boundingClientRect(res => {
                if (res) {
                    // 滚动到热门列表位置
                    uni.pageScrollTo({
                        scrollTop: res.top,
                        duration: 300
                    });
                }
            }).exec();
        },
        
        // 启动倒计时相关方法
        startCountdown() {
            this.countdownTimer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    this.hideSplash();
                }
            }, 1000);
        },
        
        // 跳过启动页面
        skipSplash() {
            this.hideSplash();
        },
        
        // 隐藏启动页面
        hideSplash() {
            if (this.countdownTimer) {
                clearInterval(this.countdownTimer);
                this.countdownTimer = null;
            }
            this.showSplash = false;
        },
      async goto_map() {
        let locat = await this.$get_location()
        uni.chooseLocation({
          latitude: locat.latitude,
          longitude: locat.longitude,
          success: (res) => {
            // this.add_form.name = res.name
            console.log(1111, res)
            this.longitude = res.longitude
            this.latitude = res.latitude
            this.information_form.keyword = res.address?res.address:res.name
			this.seach_type=1
            this.get_map(true)
            // this.get_information(true)
          }
        });

      },
      get_tree_map_num(is_force = false) {
        return new Promise((suc, err) => {
          let information_form = {}// 对象深度克隆
          information_form.lon = uni.getStorageSync('longitude')
          information_form.lat = uni.getStorageSync('latitude')
          console.log(8888, location)
          this.$http.to_http('system/dict/data/typeApi/tree_map_num', information_form, 'GET', is_force ? '加载中' : false).then(res => {
            res = res.data
            if (res.code != 200) {
              return uni.showToast({
                title: "请求失败",
                icon: "none"
              })
            }
            this.dictValue = res.data[0].dictValue
            suc(true);
          }).catch(async err => {

            suc(true);
          })
        })
      },
        to_pages(identification) {
            uni.navigateTo({
                url: "/pages/other/other-nformation?identification=" + identification
            })
        },
        /**
         * 获取信息列表
         */
        get_map(is_force = false) {
            if (is_force) {
                this.information_list = []
                this.information_form.page = 0
                // this.$refs.information_list.foreFlowView(); // 清空瀑布流
            }
            this.page_loding = 'loading'
            return new Promise((suc, err) => {
                let information_form = uni.$u.deepClone(this.information_form) // 对象深度克隆
                if (this.seach_type == 1) {
                    information_form.lon = this.longitude
                    information_form.lat = this.latitude
                } else {
                    information_form.lon = uni.getStorageSync('longitude')
                    information_form.lat = uni.getStorageSync('latitude')
                }
                console.log(8888, information_form)
				this.seach_type=0
                this.$http.to_http('search/trees/keyword', information_form, 'GET', is_force ? '加载中' : false).then(res => {
                    res = res.data
                    if (res.code != 200) {
                        return uni.showToast({
                            title: "系统维护中",
                            icon: "none"
                        })
                    }
                    // if(res.data.total>0){
                    // this.title = res.data.rows[0].category.name
                    // }
                    if (res.data.content.length > 0) {
                        this.information_form.page++;
                    }
                    if (res.data.totalPages > this.information_form.page) {
                        this.page_loding = 'loadmore'
                    } else {
                        setTimeout(() => {
                            this.page_loding = 'nomore'
                        }, 1000)
                    }
                    if (res.data.content.length > 0) {
                        this.longitude = res.data.content[0].tree.longitude
                        this.latitude = res.data.content[0].tree.latitude
                        this.scale = 15
                        res.data.content.forEach(el => {
                            const marker = {
                                id: this.markers.length + 1,
                                longitude: el.tree.longitude,
                                latitude: el.tree.latitude,
                                title: el.tree.name,
                                iconPath: el.tree.roundedImage,
                                ids: el.tree.id,
                                width: 44,
                                height: 44,
                                anchor: { x: 0.5, y: 0.5 },
                                callout: {
                                    content: el.tree.name,
                                    color: '#3d3d3d',
                                    padding: 5,
                                    borderWidth: 2,
                                    borderColor: '#fff',
                                    borderRadius: 10,
                                    fontSize: 16,
                                    display: 'ALWAYS'
                                }
                            }
                            this.markers.push(marker)
                            this.information_list.push(el)
                        })
                    } else {
                        uni.showToast({
                            title: "暂无数据",
                            icon: "none"
                        })
                    }
                    this.$refs.information_list.init(this.information_list) // 初始化

                    suc(true);
                }).catch(async err => {
                    if (err.statusCode = 401 && this.error_num > 0) {
                        this.error_num--
                        // await this.$wechatLogin()
                        // await this.get_information()
                    }
                    suc(true);
                })
            })
        },
        // 放大地图
        zoomIn() {
            if (this.scale < 20) {
                this.scale += 1;
            }
        },

        // 缩小地图
        zoomOut() {
            if (this.scale > 4) {
                this.scale -= 1;
            }
        },
        
        /**
         * 创建带圆角和白色边框的地图标记图标
         * @param {string} imageUrl - 原始图片URL
         * @returns {string} - 处理后的图标路径
         */
        createRoundedMarkerIcon(imageUrl) {
            // 对于阿里云OSS图片，可以通过图片处理参数添加圆角和白色边框效果
            // ?x-oss-process=image/resize,w_40,h_40/circle,r_18/rounded-corners,r_2/watermark,t_100,g_center,x_0,y_0,text_,color_ffffff,size_2,shadow_50
            // 如果是其他图片服务，需要相应调整处理参数
             return imageUrl;
            // 对于其他图片，返回原始URL（可以在服务端预处理成圆角和边框）
            // return imageUrl;
        },
        // 地图区域变化事件
        regionchange(e) {
            console.log('地图区域变化', e.type);
        },
        // 控件点击事件
        controlTap(e) {
            console.log('点击控件', e);
            // if (e.controlId === 1) {
            //     this.moveToLocation();
            // }
        },
        // 标记点点击事件
        markerTap(e) {
            const marker = this.markers.find(m => m.id === e.markerId);
            uni.navigateTo({
                url: "/packageB/information/information?information_id=" + marker.ids + '&lat=' + marker.latitude + '&lon=' + marker.longitude
            })
        },

        get_un_read_msg_num() {
            return new Promise((suc, err) => {
                this.$http.to_http('/api/user/get_un_read_msg_num', {}, 'POST', false).then(res => {
                    res = res.data
                    if (res.code != 1) {
                        return uni.showToast({
                            title: "系统维护中",
                            icon: "none"
                        })
                    }
                    if (res.data.un_count > 0) {
                        uni.setTabBarBadge({
                            index: 2,
                            text: res.data.un_count
                        })
                    } else {
                        uni.removeTabBarBadge({
                            index: 2
                        })
                    }
                    suc(true);
                })
            })
        },

        async init() {
            this.get_tree_map_num()
            this.information_form.searchType = 0;
            this.page_loding = 'loading'
            this.information_list = [];
            this.$refs.information_list.foreFlowView(); // 清空瀑布流
            this.information_form.page = 0;

            // #ifdef MP-WEIXIN
            // 先检查是否已授权位置权限
            uni.getSetting({
                success: (res) => {
                    if (res.authSetting['scope.userLocation']) {
                        // 已授权，直接获取位置
                        this.getLocationAndInit();
                    } else {
                        // 未授权，显示授权提示
                        this.showLocationAuthModal();
                    }
                },
                fail: () => {
                    // 获取设置失败，默认尝试获取位置
                    this.getLocationAndInit();
                }
            });
            // #endif
        },
        
        // 显示位置授权提示框
        showLocationAuthModal() {
            uni.showModal({
                title: '位置授权',
                content: '我们需要您的位置信息用于匹配您附近的内容，为您提供更精准的服务。',
                confirmText: '授权',
                cancelText: '暂不授权',
                success: (res) => {
                    if (res.confirm) {
                        // 用户点击授权，调用getLocation触发授权
                        this.getLocationAndInit();
                    } else if (res.cancel) {
                        // 用户拒绝授权，使用默认位置
                        this.useDefaultLocation();
                    }
                }
            });
        },
        
        // 获取位置并初始化
        async getLocationAndInit() {
            try {
                let location = await this.$get_location()
                console.log('获取到的位置信息:', location)
                // 确保location不是undefined
                if (location && location.latitude && location.longitude) {
                    this.information_form.lat = location.latitude
                    this.information_form.lon = location.longitude
                } else {
                    console.log('位置信息无效，使用默认位置')
                    // 如果位置信息无效，使用默认值
                    this.information_form.lat = "29.620623"
                    this.information_form.lon = "106.584656"
                }
            } catch (error) {
                console.log('获取位置异常:', error)
                // 出现异常时使用默认位置
                this.information_form.lat = "29.620623"
                this.information_form.lon = "106.584656"
            }
            
            this.get_information()
            this.loading = false
            setTimeout(() => {
                this.is_loading = false
            }, 500)
        },
        
        // 使用默认位置初始化
        useDefaultLocation() {
            // 使用默认位置信息
            this.information_form.lat = "29.620623"
            this.information_form.lon = "106.584656"
            this.get_information()
            this.is_loading = false
            // 设置加载完成状态
            this.page_loding = 'nomore';
        },
        /**
         * 选择小区
         */
        select_community() {
            uni.navigateTo({
                url: "/packageB/information/lists",
            })
        },



        /**
         * 获取信息列表
         */
        get_information(location) {
            // 如果没有经纬度信息，不发送请求
            if (!this.information_form.lat || !this.information_form.lon) {
                console.log('缺少经纬度信息，不发送请求');
                this.page_loding = 'nomore';
                return Promise.resolve();
            }
            
            if (location) {
                this.information_form.lat = location.latitude
                this.information_form.lon = location.longitude
            }
            return new Promise((suc, err) => {
                // this.information_form
                this.$http.to_http('search/trees/popularNearby/page', this.information_form, 'GET', false).then(res => {
                    res = res.data
                    if (res.code != 200) {
                        return uni.showToast({
                            title: "系统维护中",
                            icon: "none"
                        })
                    }
                    if (res.data.content.length > 0) {
                        this.information_form.page++;
                    }
                    if (res.data.totalPages > this.information_form.page) {
                        this.page_loding = 'loadmore'
                    } else {
                        setTimeout(() => {
                            this.page_loding = 'nomore'
                        }, 1000)
                    }
                    res.data.content.forEach(el => {
                        this.information_list.push(el)
                    })
					if (this.information_form.page === 0) {
					  // 第一页数据，重新初始化
					  this.$refs.information_list.init(this.information_list)
					} else {
					  // 后续页面，追加数据
					  this.$refs.information_list.appendData(res.data.content)
					}
                    suc(true);
                }).catch(async err => {
                    suc(true);
                })
            })
        },
        tab_click(item) {
            console.log(111111, item.index)
            this.information_form.searchType = item.index
            this.page_loding = 'loading' // 确保设置加载状态
            this.information_list = [];
            this.$refs.information_list.foreFlowView(); // 清空瀑布流
            this.information_form.page = 0;
            if (item.index != 2) {
                this.get_information()
            } else {
				this.information_form.keyword=''
				console.log('=====>',this.information_form.keyword)
               this.information_form.size = this.dictValue;
              this.get_map(true)
            }
            
            // 如果点击的是热门tab，则滚动到顶部
            if (item.index === 0) {
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.scrollToHotList();
                    }, 100);
                });
            }
        },
        to_information(item) {
            console.log(item)
            uni.navigateTo({
                url: "/packageB/information/information?information_id=" + item.id + '&lat=' + item.latitude + '&lon=' + item.longitude
            })
        },
        
        // 跳转到自然之声页面
        gotoNatureSound() {
            uni.navigateTo({
                url: '/packageB/nature-sound/nature-sound'
            })
        },

    }
}
</script>

<style scoped lang="scss">
.content {
    background: transparent;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #333;
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 230rpx;
}

.headers {
    background-image: url('http://xaiohua.oss-cn-beijing.aliyuncs.com/medias/trees/treeId/images/56ea2705-adb5-4a12-848c-8fbe12e9a179.png?Expires=4907190184&OSSAccessKeyId=LTAI5t93GNuNHEtLjPm4NWTG&Signature=mJQMCS3RjUe%2FrD8Q%2FiLLXIHmk3A%3D');
    height: 500rpx;
    width: 100%;
    background-size: cover;
    padding-top: 100rpx;
    position: fixed;
    z-index: 1;
    top: 0;
}

.u-nav-slot {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 200rpx;
    height: 60rpx;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50rpx;
    margin-left: 30rpx;
    padding-left: 20rpx;
}

///地图
.control-group {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 10rpx;
    top: 45%;
}

.control-btn {
    width: 80rpx;
    height: 90rpx;
    background-color: #25772f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60rpx;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.tab-class {
    background-image: url('http://xaiohua.oss-cn-beijing.aliyuncs.com/medias/trees/treeId/images/56ea2705-adb5-4a12-848c-8fbe12e9a179.png?Expires=4907190184&OSSAccessKeyId=LTAI5t93GNuNHEtLjPm4NWTG&Signature=mJQMCS3RjUe%2FrD8Q%2FiLLXIHmk3A%3D');
    position: fixed;
    padding-top: 80rpx;
    background-size: cover;
    width: 100%;
    z-index: 11;
}

/* 启动页面样式 */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-image {
    width: 300rpx;
    height: 300rpx;
    //border-radius: 20rpx;
    //box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
}

.splash-controls {
    position: absolute;
    top: 180rpx;
    right: 30rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.countdown-container {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  background-color: #25772f;
    border: 2rpx solid #25772f;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10rpx);
}

.countdown-text {
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
}

.skip-button {
    padding: 12rpx 24rpx;
    background-color:#25772f;
    border: 2rpx solid #25772f;
    border-radius: 30rpx;
    backdrop-filter: blur(10rpx);
    transition: all 0.3s ease;
}

.skip-button:active {
    background-color: #25772f;
    transform: scale(0.95);
}

.skip-text {
    color: #fff;
    font-size: 28rpx;
    font-weight: 500;
}

/* 自然之声图标样式 */
.nature-sound-icon {
  position: fixed;
  right: 30rpx;
  bottom: 180rpx;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //background-color: #25772f;
  border-radius: 60rpx;
  padding: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.icon-container {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-bottom: 8rpx;
}

.icon-text {
  color: #25772f;
  font-size: 20rpx;
  font-weight: 500;
}
.button-group {
  position: fixed;
  left: 0;
  right: 0;
  top: 230rpx;
  background-color: #fff;  /* 改为白色 */
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 10;
}
</style>